<template>
    <view :data-theme="globPrimary">
        <u-navbar title="任教班级"></u-navbar>
        <view class="classes-wrap">
            <mescroll-body
                ref="mescrollRef"
                :height="mescrollHeight"
                @init="mescrollInit"
                @down="refresh"
                @up="reachBottom"
            >
                <view class="item" v-for="item in classesList" :key="item.id">
                    <courseImage
                        width="307"
                        height="172"
                        :image="item.cover_url"
                        courseType="4"
                        courseTypeText="班级"
                    ></courseImage>
                    <view class="content">
                        <view class="title u-line-2">{{ item.title }}</view>
                        <view class="desc">
                            <view class="count">{{ item.student_count }}人</view>
                            <view
                                class="btn"
                                :style="{ color: globPrimaryColor }"
                                @click="
                                    $u.route('/pageUser/user/list/classes/student', {
                                        id: item.id,
                                    })
                                "
                            >
                                学员管理
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
    </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
    mixins: [MescrollMixin],
    components: {
        courseImage,
    },
    data() {
        return {
            classesList: [],
            isDataEmpty: false,
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        mescrollHeight() {
            let windowHeight = this.$u.sys().windowHeight
            let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight
            return `${height}px`
        },
    },
    methods: {
        refresh() {
            this.mescroll.resetUpScroll()
        },
        // 页面数据
        reachBottom() {
            this.$edu.api.getCourseClassesTeach().then((res) => {
                const { data } = res
                this.classesList = data
                this.mescroll.endSuccess(data.length)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.classes-wrap {
    padding: 0 30rpx;
    background-color: #ffffff;
    .item {
        display: flex;
        margin-top: 32rpx;
        .content {
            flex: 1;
            margin-left: 24rpx;
            .title {
                font-size: 30rpx;
                font-weight: 400;
                color: $edu-main-color;
                height: 80rpx;
                line-height: 40rpx;
            }
        }
        .desc {
            display: flex;
            align-items: center;
            margin-top: 50rpx;
            .count {
                font-size: 24rpx;
                font-weight: 400;
                color: #888888;
            }
            .btn {
                margin-left: auto;
                font-size: 30rpx;
                font-weight: 400;
                @include text-color();
            }
        }
    }
}
</style>
